<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ include file="/wesite/view/common/base.jsp" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>微信支付</title>
    <%@ include file="/wesite/view/common/common.jsp" %>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script type="text/javascript">
        wx.config({
            debug: false,
            appId: '${jsapi.appId}',
            timestamp: '${jsapi.timestamp}',
            nonceStr: '${jsapi.nonceStr}',
            signature: '${jsapi.signature}',
            jsApiList: ['chooseWXPay']
        });
        wx.ready(function () {
            wx.chooseWXPay({
                timestamp: '${payinfo["timeStamp"]}',
                nonceStr: '${payinfo["nonceStr"]}',
                package: '${payinfo["package"]}',
                signType: '${payinfo["signType"]}',
                paySign: '${payinfo["paySign"]}',
                success: function (res) {

                }
            });
        });
        wx.error(function (res) {

        });
    </script>
</head>
<style>
    input{
        -webkit-appearance: none;
        outline: none;
    }
   .payment .payment-account{
        margin: 1.6rem 1.066667rem;
        height: 3.6rem;
        font-size: 0;
    }
   .payment .payment-account .pay-bgimg{
        float: left;
        width: 3.6rem;
        height: 3.6rem;
        background: url("${webctx}/images/ico-payment.png") center no-repeat;
        background-size: 2.613333rem 2.133333rem;
    }
   .payment .payment-account .pay-txt{
        float: left;
        width: 13rem;
        height:3.6rem;
        font-size:.8rem;
        color: #555;
        font-family: "Microsoft YaHei";
    }
   .payment .payment-account .pay-txt p{
        display: block;
        line-height: 1.5;
    }
   .payment .payment-account .pay-txt p em{
        color: #ff6767;
    }
    .payment .inp-check{
        display: block;
        padding-left: 1.066667rem;
        background-color: #fff;
    }
   .payment .inp-check label{
       display: block;
       width:100%;
       height: 2.4rem;
       background: #fff url("${webctx}/images/ico-pay-delivery.png") left center no-repeat;
       background-size: 1.12rem 1.253333rem;
       line-height: 2.4rem;
       padding:0 .533333rem 0 1.653333rem;
   }
    .payment .inp-check label:first-child{
        background: #fff url("${webctx}/images/ico-pay-wechat.png") left center no-repeat;
        background-size: 1.253333rem 1.12rem;
        border-bottom: 1px solid #eee;
    }
    .payment .inp-check label input{
        float: right;
        width: 1.066667rem;
        height: 1.066667rem;
        border:1px solid #dcdcdc;
        border-radius:100%;
        margin-top: .666667rem;
    }
    .payment .inp-check label.checked  input{
        background: url("${webctx}/images/ico-pay-checked.png") center no-repeat;
        background-size: 1.066667rem;
    }
    .payment .payment-btn{
        display: block;
        margin:0 auto;
        margin-top: 2.666667rem;
        width:18.4rem;
        height: 2.4rem;
        background-color: #ff6767;
        color: #fff;
        font-size:.693333rem;
        border-radius: 5px;
        text-align:center;
        line-height:2.4rem;
    }
</style>
<body>

<div class="payment">
    <div class="payment-account">
        <span class="pay-bgimg"></span>
        <div class="pay-txt">
            <p>网上支付订单等待支付</p>
            <p>订单号：${payment.sn}</p>
            <p>支付金额 :  <em>￥${payment.amount}</em></p>
        </div>
        <div class="cl"></div>
    </div>
    <div class="inp-check">
        <label class="checked">微信公众号支付<input type="radio" name="radio"></label>
        <label>货到付款<input type="radio" name="radio"></label>

    </div>
    <a class="payment-btn" href="javascript:;">立即支付</a>
</div>

<script>
    $(".inp-check label").click(function () {
        $(".inp-check label").removeClass("checked");
        $(this).addClass("checked");
    })
</script>
</body>
</html>
